<template>
    <div class="addPage">
        <div class="Btn flex">
            <div></div>
            <div class="submit" @click="submit">确认提交</div>
        </div>
        <div class="title">基本信息</div>
        <div class="condition_1">
            <div class="flex">
                <div>预案名称</div>
                <el-input placeholder="请输入预案名称" v-model="List.预案名称" clearable />
            </div>
        </div>
        <div class="condition_2">
            <div class="flex">
                <div>预案类型</div>
                <el-input placeholder="请输入预案类型" v-model="List.预案类型" clearable disabled />
            </div>
            <div class="flex">
                <div>适用范围</div>
                <el-input placeholder="请输入适用范围" v-model="List.适用范围" clearable />
            </div>
            <div class="flex">
                <div>存在风险区域</div>
                <el-input placeholder="请输入存在风险区域" v-model="List.存在风险区域" clearable />
            </div>
            <div class="flex">
                <div>响应等级</div>
                <el-input placeholder="请输入响应等级" v-model="List.响应等级" clearable />
            </div>
            <div class="flex">
                <div>等级名称</div>
                <el-input placeholder="请输入等级名称" v-model="List.等级名称" clearable />
            </div>
            <div class="flex">
                <div>可能发生危害</div>
                <el-input placeholder="请输入可能发生危害" v-model="List.可能发生危害" clearable />
            </div>
        </div>
        <div class="Line"></div>
        <div class="title">应急组织机构及职责</div>
        <div class="responsibility flex">
            <div class="responsibility_1">
                <div class="top flex">
                    <div class="Owned" @click="current = '应急救援指挥部'"
                        :style="{ background: current === '应急救援指挥部' ? 'rgba(22, 93, 255, 0.20)' : '', color: current === '应急救援指挥部' ? '#4A5667' : '#6A788D' }">
                        福建龙钢新型材料有限公司
                        生产安全事故应急救援指挥部
                    </div>
                    <div class="arrow"></div>
                    <div class="text" @click="current = '应急办公室'"
                        :style="{ background: current === '应急办公室' ? 'rgba(22, 93, 255, 0.20)' : '', color: current === '应急办公室' ? '#4A5667' : '#6A788D' }">
                        应急办公室</div>
                </div>
                <div class="mid"></div>
                <div class="bottom flex">
                    <div v-for="item in OwnedList" :key="item" :class="item === current ? 'active' : ''"
                        @click="current = item">
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="responsibility_2">
                <div class="List flex">
                    <div class="List_title">所属职责</div>
                    <div v-if="resList && resList[0] && resList[0].所属职责" v-html="resList[0].所属职责" class="List_con"
                        @mouseenter="checkOverflow(resList[0].所属职责, '移入')"
                        @mouseleave="checkOverflow(resList[0].所属职责, '移出')"></div>
                    <div v-if="resList && resList[0] && resList[0].所属职责" v-html="resList[0].所属职责" class="hover_con"
                        v-show="isOverflow"></div>
                </div>
                <div class="List flex">
                    <div class="List_title">所属人员</div>
                    <div class="List_con" v-if="resList && resList[0] && resList[0].所属人员">{{ resList[0].所属人员 }}</div>
                </div>
                <div class="resList">
                    <div v-for="(item, index) in resList" :key="index"
                        :class="resList && resList.length > 1 ? 'resList_1' : 'resList_2'">
                        <div class="resList_List flex">
                            <div class="resList_title">负责人所在单位</div>
                            <div class="resList_con">{{ item.负责人所在单位 }}</div>
                            <div class="resList_title">负责人公司职位</div>
                            <div class="resList_con">{{ item.负责人公司职位 }}</div>
                            <div class="resList_title">应急角色</div>
                            <div class="resList_con">{{ item.应急角色 }}</div>
                        </div>
                        <div class="resList_List flex">
                            <div class="resList_title">应急角色职责</div>
                            <div :class="item.应急角色职责 && item.应急角色职责.length > 100 ? 'resList_hidden' : 'resList_cons'">
                                {{ item.应急角色职责 || '' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Line"></div>
        <div class="title">响应启动</div>
        <div class="titles">信息报告</div>
        <div class="information flex">
            <div class="information_1">
                <div class="information_title">报告类型</div>
                <div class="information_con">
                    <div v-for="(item, index) in informationList" :key="index"
                        :class="current1 === item.报告类型 ? 'active' : ''" @click="current1 = item.报告类型">
                        <div class="content_2 ">{{ item.报告类型 }}</div>
                    </div>
                </div>
            </div>
            <div class="information_2">
                <div class="information_title">报告内容</div>
                <div class="information_con">
                    <div v-for="(item, index) in informationData" :key="index" class="flex">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2">{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="titles">响应程序</div>
        <div class="program"></div>
        <div class="titles">处置内容</div>
        <div class="informationS flex">
            <div class="information_1">
                <div class="information_title">措施名称列表</div>
                <div class="information_con">
                    <div v-for="(item, index) in disposeList" :key="index"
                        :class="current2 === item.措施名称 ? 'active' : ''" @click="current2 = item.措施名称">
                        <div class="content_2 " v-if="dispose === true">{{ item.措施名称 }}</div>
                        <div class="content_2 flex" v-else>
                            <el-input v-model="item.措施名称" />
                            <i class="el-icon-delete" @click="changeClick('处置内容', '删除', index)"></i>
                        </div>
                    </div>
                </div>
                <div class="Btns flex">
                    <div class="edit" @click="changeClick('处置内容', '编辑')" v-show="dispose === true">编辑</div>
                    <div class="btnList flex" v-show="dispose === false">
                        <div @click="changeClick('处置内容', '取消')">取消</div>
                        <div @click="changeClick('处置内容', '添加')">添加</div>
                        <div @click="changeClick('处置内容', '完成')">完成</div>
                    </div>
                </div>
            </div>
            <div class="information_2">
                <div class="information_title">措施内容</div>
                <div class="information_con">
                    <div v-for="(item, index) in disposeData" :key="index" class="flex">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2" v-if="dispose1 === true">{{ item.value }}</div>
                        <div class="content_2 flex" v-else>
                            <el-input v-model="item.value" />
                            <i class="el-icon-delete" @click="changeClick('处置内容1', '删除', index)"></i>
                        </div>
                    </div>
                </div>
                <div class="Btns flex">
                    <div class="edit" @click="changeClick('处置内容1', '编辑')" v-show="dispose1 === true">编辑</div>
                    <div class="btnList flex" v-show="dispose1 === false">
                        <div @click="changeClick('处置内容1', '取消')">取消</div>
                        <div @click="changeClick('处置内容1', '添加')">添加</div>
                        <div @click="changeClick('处置内容1', '完成')">完成</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="titles">应急保障</div>
        <div class="guarantee flex">
            <div class="typeList">
                <div class="text">保障类别</div>
                <div class="texts">
                    <div v-for="item in guaranteeList" :key="item.保障类别" :class="item.保障类别 === guarantee ? 'active' : ''"
                        @click="guarantee = item.保障类别">
                        {{ item.保障类别 }}
                    </div>
                </div>
            </div>
            <div class="contentList">
                <div class="text">保障内容</div>
                <div class="texts">
                    <div v-for="(item, index) in guaranteeData" :key="index" class="flex">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2">{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Line"></div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'addPage',
    components: {
    },
    data() {
        return {
            List: {
                预案名称: "",
                预案类型: "专项应急预案",
                适用范围: "",
                存在风险区域: "",
                响应等级: "",
                等级名称: "",
                可能发生危害: "",
            },
            isOverflow: false,
            OwnedList: ["生产运行及通信联络组", "治安组", "物资供应组", "消防队", "抢险组", "医疗救护组", "应急监测组", "接待组", "专家组"],
            current: "应急救援指挥部",
            resList: [
                { 所属职责: "", 所属人员: "" }
            ],
            typeList: [],
            报告内容: "",
            措施内容: "",
            types: "",
            reportData: [],
            guaranteeList: [],
            guaranteeData: [],
            guarantee: "",
            title: "",
            informationList: [],
            informationData: [],
            current1: "",

            dispose: true,
            dispose1: true,
            disposeList: [],
            disposeList1: [],
            disposeData: [{ value: "" }],
            disposeData1: [],
            current2: "",
        }
    },
    watch: {
        current: {
            handler(val) {
                this.getList(val)
            },
            deep: true
        },
        types: {
            handler(val) {
                const matchedItem = this.reportData.find(item => item.报告类型 === val);
                if (matchedItem) {
                    this.报告内容 = matchedItem.报告内容.replace(/（\d+）/g, "<br>$&");
                }
            },
            deep: true
        },
        guarantee: {
            handler(val) {
                if (val) {
                    const findContentByDisposal = (disposalName) => {
                        const item = this.guaranteeList.find(item => item.保障类别 === disposalName);
                        return item ? item.保障内容 : "未找到匹配的处置内容";
                    }
                    this.guaranteeData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }
            },
            deep: true
        },
        current1: {
            handler(val) {
                if (val) {
                    const findContentByDisposal = (disposalName) => {
                        const item = this.informationList.find(item => item.报告类型 === disposalName);
                        return item ? item.报告内容 : "未找到匹配的处置内容";
                    }
                    this.informationData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }
            },
            deep: true
        },
        current2: {
            handler(val) {
                if (val) {
                    const findContentByDisposal = (disposalName) => {
                        const item = this.disposeList.find(item => item.措施名称 === disposalName);
                        return item ? item.措施内容 : "未找到匹配的处置内容";
                    }
                    this.disposeData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }
            },
            deep: true
        },
    },
    methods: {
        checkOverflow(val, text) {
            if (val.length > 85) {
                if (text === '移入') this.isOverflow = true;
                else this.isOverflow = false;
            }
        },
        async submit() {
            let disposeList = this.disposeList.map(item =>
                `('${item.预案名称}','${item.预案类型}','${item.措施名称}','${item.措施内容}')`
            ).join(',');
            if (this.List.预案名称 === '') {
                this.$message({
                    message: '请输入预案名称',
                    type: 'warning'
                });
            } else {
                if (this.title === "编辑") {
                    let opp = false, opp1 = false;
                    const options = {
                        method: 'POST',
                        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_specrspmrs where PlanName = '${this.List.预案名称}' and PlanType  = '${this.List.预案类型}'`
                        }
                    };
                    await axios.request(options).then(async response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_specrspmrs (PlanName,PlanType, Level, LevelName, ApplScope, ExistArea, PossOccur)
                                        VALUES ('${this.List.预案名称}', '${this.List.预案类型}', '${this.List.响应等级}', '${this.List.等级名称}', '${this.List.适用范围}', '${this.List.存在风险区域}', '${this.List.可能发生危害}')`
                                }
                            };
                            await axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") opp = true
                                else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        } else this.$message.error("修改失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const options1 = {
                        method: 'POST',
                        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_specrspmrs_deal where PlanName = '${this.List.预案名称}' and PlanType  = '${this.List.预案类型}'`
                        }
                    };
                    await axios.request(options1).then(async response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_specrspmrs_deal (PlanName, PlanType, DealStepName, DealStepContent) VALUES ${disposeList}`
                                }
                            };
                            await axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") opp1 = true
                                else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        } else this.$message.error("修改失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    setTimeout(() => {
                        if (opp === true && opp1 === true) {
                            this.$message.success("修改成功");
                            this.$router.push({ path: '/special' })
                        }
                    }, 500);
                } else {
                    let opp = false, opp1 = false;
                    const optionsAdd = {
                        method: 'POST',
                        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_specrspmrs (PlanName,PlanType, Level, LevelName, ApplScope, ExistArea, PossOccur)
                                        VALUES ('${this.List.预案名称}', '${this.List.预案类型}', '${this.List.响应等级}', '${this.List.等级名称}', '${this.List.适用范围}', '${this.List.存在风险区域}', '${this.List.可能发生危害}')`
                        }
                    };
                    await axios.request(optionsAdd).then(response => {
                        if (response.data.message === "success") opp = true
                        else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    if (disposeList) {
                        const optionsAdd1 = {
                            method: 'POST',
                            url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                            data: {
                                TIP: 'INSERT',
                                SQL: `INSERT INTO imp_emergmanage.emerg_specrspmrs_deal (PlanName, PlanType, DealStepName, DealStepContent) VALUES ${disposeList}`
                            }
                        };
                        await axios.request(optionsAdd1).then(response => {
                            if (response.data.message === "success") opp1 = true
                            else this.$message.error("添加失败");
                        }).catch(function (error) {
                            console.error(error);
                        });
                    } else opp1 = true
                    setTimeout(() => {
                        if (opp === true && opp1 === true) {
                            this.$message.success("添加成功");
                            this.$router.push({ path: '/EmergencyPlan/special' })
                        }
                    }, 500);
                }
            }
        },
        async getList(val) {
            const options = {
                method: 'POST',
                url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc',
                data: {
                    TIP: 'select',
                    SQL: `select OwnedBy '所属', OwnedByDuty '所属职责', OwnedByCrew '所属人员', Unit '负责人所在单位', Title '负责人公司职位', role '应急角色', RoleDuty '应急角色职责'
                            from imp_emergmanage.emerg_rescue_orgduty where OwnedBy = '${val}'`
                }
            };
            await axios.request(options).then(response => {
                let data = response.data.data;
                console.log(data)
                data.forEach(item => {
                    item.所属职责 = item.所属职责.replace(/（\d+）/g, "<br>$&");
                    item.应急角色职责 = item.应急角色职责 || '';
                });
                this.resList = data
                // console.log(data)
            }).catch(function (error) {
                console.error(error);
            });
        },
        getType() {
            let URL = `http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc`
            const options = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select ReportType '报告类型', ReportContent '报告内容' from imp_emergmanage.emerg_response_increport`
                }
            };
            axios.request(options).then(response => {
                let data = response.data.data;
                let current = data[0].报告类型
                this.informationList = data
                this.current1 = current
                this.informationData = data[0].报告内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
            }).catch(function (error) {
                console.error(error);
            });
            // 处置内容
            const CZNR = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select PlanName '预案名称', PlanType '预案类型', DealStepName '措施名称', DealStepContent '措施内容' from imp_emergmanage.emerg_specrspmrs_deal where PlanName = '${this.List.预案名称}' and PlanType  = '${this.List.预案类型}'`
                }
            };
            axios.request(CZNR).then(response => {
                let data = response.data.data;
                let current;
                if (data && Array.isArray(data) && data.length > 0) {
                    current = data[0].措施名称;
                    this.disposeList = data
                    this.current2 = current
                    this.disposeData = data[0].措施内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    this.disposeData1 = data[0].措施内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    this.disposeList1 = JSON.parse(JSON.stringify(data));
                }
            }).catch(function (error) {
                console.error(error);
            });

            // 应急保障
            const YJBZ = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select EnsureType '保障类别', EnsureContnet '保障内容' from imp_emergmanage.emerg_ensure`
                }
            };
            axios.request(YJBZ).then(response => {
                let data = response.data.data;
                let current = data[0].保障类别
                this.guaranteeList = data
                this.guarantee = current
                this.guaranteeData = data[0].保障内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                console.log(this.guaranteeData);
            }).catch(function (error) {
                console.error(error);
            });
        },
        changeClick(type, status, index) {
            if (type === "事故处置措施") {
                if (status === '编辑') this.treeEdit = false
                if (status === '完成') {
                    this.treeEdit = true
                    let oldData = this.treeData1
                    let newData = JSON.parse(JSON.stringify(oldData));
                    // 遍历 list 中的每一项   
                    this.treeData.forEach(item => {
                        if (!item.children) {
                            // 如果没有 children，检查是否存在对应的处置内容（措施名称为空）
                            const exists = newData.some(
                                data => data.处置内容 === item.label && data.措施名称 === ""
                            );
                            if (!exists) {
                                newData.push({
                                    处置内容: item.label,
                                    措施名称: "",
                                    措施内容: "（1）xxxx",
                                    处置名称: "事故处置措施",
                                });
                            }
                        } else {
                            // 如果有 children，遍历每一个子项
                            item.children.forEach(child => {
                                const exists = newData.some(
                                    data => data.处置内容 === item.label && data.措施名称 === child.label
                                );
                                if (!exists) {
                                    newData.push({
                                        处置内容: item.label,
                                        措施名称: child.label,
                                        措施内容: "（1）xxxx",
                                        处置名称: "事故处置措施",
                                    });
                                }
                            });
                        }
                    });
                    this.treeData1 = newData
                }
                if (status === '添加') this.treeData.push({ label: '' })
            } else if (type === "事故处置措施1") {
                if (status === '编辑') if (this.treeList.length > 0) this.treeEdit1 = false
                if (status === '完成') {
                    this.treeEdit1 = true
                    let name = this.treeList[0].name
                    let oldData = this.treeData1
                    text = this.treeList.map((item, index) => `（${index + 1}）${item.value}`).join('');
                    let result = oldData.filter(item =>
                        item.处置内容.includes(name) ||
                        (item.措施名称 && item.措施名称.includes(name))
                    );
                    result[0].措施内容 = text

                    let updatedData = JSON.parse(JSON.stringify(oldData));
                    result.forEach(newItem => {
                        let foundIndex = updatedData.findIndex(oldItem =>
                            oldItem.处置内容 === newItem.处置内容 &&
                            oldItem.措施名称 === newItem.措施名称
                        );
                        if (foundIndex !== -1) {
                            updatedData[foundIndex].措施内容 = newItem.措施内容;
                        } else {
                            updatedData.push(newItem);
                        }
                    });
                    this.treeData1 = updatedData
                }
                if (status === '删除') this.treeList.splice(index, 1)
                if (status === '添加') this.treeList.push({ value: '' })
            } else if (type === '处置内容') {
                if (status === '编辑') this.dispose = false
                if (status === '完成') {
                    this.dispose = true
                    this.disposeList1 = JSON.parse(JSON.stringify(this.disposeList));
                }
                if (status === '取消') {
                    this.dispose = true
                    this.disposeList = JSON.parse(JSON.stringify(this.disposeList1));
                } if (status === '添加') {
                    this.disposeList.push({ 预案类型: "专项应急预案", 预案名称: this.List.预案名称, 措施名称: "", 措施内容: "x" })
                } if (status === '删除') {
                    console.log(index, this.disposeList)
                    if (index >= 0 && index < this.disposeList.length) {
                        this.disposeList.splice(index, 1);
                    }
                }
            } else if (type === '处置内容1') {
                if (status === '编辑') this.dispose1 = false
                if (status === '完成') {
                    this.dispose1 = true
                    this.disposeData1 = JSON.parse(JSON.stringify(this.disposeData));
                    let text = this.disposeData.map((item, index) => `（${index + 1}）${item.value}`).join('');
                    let result = this.disposeList.filter(item =>
                        item.措施名称 && item.措施名称.includes(this.current1)
                    );
                    this.disposeList = this.disposeList.map(item => {
                        if (item.措施名称 === this.current2) {
                            return {
                                ...item,
                                措施内容: text
                            };
                        }
                        return item;
                    });
                }
                if (status === '取消') {
                    this.dispose1 = true
                    this.disposeData = JSON.parse(JSON.stringify(this.disposeData1));
                } if (status === '添加') {
                    this.disposeData.push({ 措施名称: "" })
                } if (status === '删除') {
                    if (index >= 0 && index < this.disposeData.length) {
                        this.disposeData.splice(index, 1);
                    }
                }
            }
        },
    },
    mounted() {
        if (this.$route.query.rowList) {
            this.List = this.$route.query.rowList
            this.title = this.$route.query.title
        }
        this.getList(this.current)
        this.getType()
    },
}
</script>
<style lang="scss" scoped>
.addPage {
    width: 100%;
    padding: 24px 0;
    font-family: "Source Han Sans CN";
    font-style: normal;

    &>div {
        width: (1672 / 1720) * 100%;
        margin: 0 auto;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .Btn {
        height: 36px;

        .submit {
            margin-right: 32px;
            width: 80px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px;
            background: #165DFF;
            text-align: center;
            color: #FFF;
            font-size: 14px;
            font-weight: 700;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .title {
        color: #163154;
        font-size: 20px;
        font-weight: 700;
        line-height: 22px;
        text-align: left;
    }

    .condition_1 {
        margin-top: 32px;
        height: 32px;
        line-height: 32px !important;
        color: #6A788D;
        text-align: right;
        font-size: 14px;
        font-weight: 400;

        &>div {
            width: 255px;
        }

        ::v-deep .el-input {
            width: 185px !important;
        }

        ::v-deep .el-input--medium .el-input__inner {
            height: 32px !important;
            line-height: 32px !important;
        }
    }

    .condition_2 {
        margin-top: 19px;
        width: (1608 / 1720) * 100%;
        height: 141px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 21px 0;

        &>div {
            width: 472px;
            height: 32px;
            // margin-right: 72px;
            margin-bottom: 30px;
            line-height: 32px;
            color: #6A788D;
            font-size: 14px;
            font-weight: 400;

            &>div:nth-child(1) {
                text-align: right;
                width: 84px;
            }

            /* 157.143% */
            &:nth-child(3n) {
                margin-right: 24px;
            }
        }

        ::v-deep .el-input {
            width: 372px !important;
        }

        ::v-deep .el-input--medium .el-input__inner {
            height: 32px !important;
            line-height: 32px !important;
        }
    }

    .Line {
        height: 1px;
        background: #165DFF;
        margin-top: 40px;
        margin-bottom: 32px;
    }

    .responsibility {
        margin-top: 32px;
        height: 386px;
        padding: 0 48px;

        .responsibility_1 {
            width: 688px;
            height: 386px;

            .top {
                width: 688px;
                height: 124px;
                border-radius: 3.583px;
                border: 2px solid #165DFF;
                font-size: 14px;
                color: #6A788D;

                .Owned {
                    margin-top: 30px;
                    margin-left: 213px;
                    width: 247px;
                    height: 64px;
                    padding: 12px 30px;
                    border-radius: 3.583px;
                    border: 2px solid #165DFF;
                    font-weight: 500;
                    line-height: 20px;

                    &:hover {
                        cursor: pointer;
                    }
                }

                .arrow {
                    margin-top: 57px;
                    width: 50px;
                    height: 20px;
                    background: url('~@/assets/images/应急管理页面/2.png') no-repeat;
                    background-size: contain;
                }

                .text {
                    margin: 48.5px 48.5px 0 0;
                    width: 113px;
                    height: 27px;
                    line-height: 27px;
                    border-radius: 3.583px;
                    text-align: center;
                    border: 2px solid #6A788D;
                    font-size: 14px;
                    font-weight: 500;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            .mid {
                width: 688px;
                height: 76px;
                background: url('~@/assets/images/应急管理页面/1.png') no-repeat 15px 0;
                background-size: contain;
            }

            .bottom {
                width: 688px;
                height: 183px;

                &>div {
                    width: 43px;
                    height: 183px;
                    border-radius: 3.583px;
                    border: 2px solid #165DFF;
                    color: #6A788D;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    writing-mode: vertical-rl;
                    text-orientation: mixed;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    letter-spacing: 2px;

                    &:hover {
                        cursor: pointer;
                    }
                }

                .active {
                    background: rgba(22, 93, 255, 0.20);
                    color: #4A5667;
                }
            }
        }

        .responsibility_2 {
            width: (835 / 1672) * 100%;
            height: 386px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);

            .List {
                height: 65px;
                border-bottom: 1px solid rgba(22, 93, 255, 0.50);
                position: relative;

                .List_title {
                    width: (139 / 835) * 100%;
                    background: rgba(22, 93, 255, 0.20);
                    color: #165DFF;
                    font-size: 14.325px;
                    font-weight: 700;
                    line-height: 65px;
                    text-align: center;
                }

                .List_con {
                    width: (670 / 835) * 100%;
                    margin-right: 10px;
                    height: 65px;
                    padding: 5px 0;
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    line-height: 30px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .hover_con {
                    position: absolute;
                    left: (139 / 835) * 100%;
                    bottom: 58px;
                    padding: 5px;
                    background-color: rgba(48, 49, 51, .7);
                    color: #FFF;
                    font-size: 12px;
                    border-radius: 3px;
                }
            }

            .resList {
                width: 100%;
                height: 255px;
                overflow-x: hidden;
                overflow: auto;

                .resList_title {
                    width: (139 / 835) * 100%;
                    background: rgba(22, 93, 255, 0.05);
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    text-align: center;
                }

                .resList_con {
                    width: (139 / 835) * 100%;
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    text-align: center;
                }

                .resList_cons,
                .resList_hidden {
                    width: (670 / 835) * 100%;
                    margin-right: 10px;
                    height: 65px;
                    padding: 5px 0;
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    line-height: 30px;
                }

                .resList_hidden {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .resList_1 {
                    width: 100%;
                    height: 126px;
                    border-bottom: 1px solid rgba(22, 93, 255, 0.50);
                    // background-color: rgba($color: #000000, $alpha: .2);

                    &:last-child {
                        border-bottom: none;
                    }

                    .resList_List {
                        height: 63px;
                        border-bottom: 1px solid rgba(22, 93, 255, 0.50);

                        &:last-child {
                            border-bottom: none;
                        }

                        .resList_title,
                        .resList_con {
                            line-height: 63px;
                        }
                    }
                }

                .resList_2 {
                    width: 100%;
                    height: 254px;


                    .resList_List {
                        height: 127px;
                        border-bottom: 1px solid rgba(22, 93, 255, 0.50);

                        &:last-child {
                            border-bottom: none;
                        }

                        .resList_title,
                        .resList_con {
                            line-height: 127px;
                        }
                    }
                }
            }
        }
    }

    .titles {
        margin: 16px auto;
        padding-left: 24px;
        color: #678BDB;
        font-size: 19px;
        font-weight: 500;
        line-height: 28px;
    }

    .information {
        width: (1608 / 1720) * 100%;
        height: 378px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 12px 24px;


        .information_1 {
            width: (260 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid #165DFF;
            border-bottom: 2px solid #165DFF;
            background-color: #FFF;

            .information_con {
                height: 302px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 48px;
                    border-top: 0.895px solid rgba(106, 120, 141, 0.50);
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    padding-left: 18px;
                    display: flex;
                    justify-content: space-between;

                    .content_1 {
                        width: 44px;
                        line-height: 48px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 48px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &:last-child {
                            border-top: none;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }
                }

            }
        }

        .active {
            background: rgba(22, 93, 255, 0.20);
        }

        .information_2 {
            width: (1284 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid #165DFF;
            border-bottom: 2px solid #165DFF;
            background-color: #FFF;

            .information_con {
                height: 302px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    // height: 52px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;


                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        margin-bottom: 5px;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }
                }
            }

            .Btns {
                .edit {
                    margin-left: 92%;
                }

                .btnList {
                    margin-left: 80%;
                }
            }
        }

        .information_title {
            height: 48px;
            line-height: 48px;
            padding-left: 18px;
            background: rgba(22, 93, 255, 0.20);
            color: #165DFF;
            font-size: 14.325px;
            font-weight: 700;
        }
    }

    .measure {
        width: (1608 / 1720) * 100%;
        height: 470px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 16px 24px;

        .Btns {
            margin-top: 8px;
            height: 24px;
            font-size: 14px;
            line-height: 24px;

            .edit {
                width: 68px;
                height: 24px;
                border-radius: 4px;
                background: #165DFF;
                color: #FFF;
                text-align: center;
                font-weight: 700;

                &:hover {
                    cursor: pointer;
                }
            }

            .btnList {
                width: 142px;
                font-weight: 350;

                &>div {
                    width: 68px;
                    height: 24px;
                    border-radius: 4px;
                    text-align: center;
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);

                    &:hover {
                        cursor: pointer;
                    }

                    &:nth-child(1) {
                        background: #165DFF;
                        color: #FFF;
                        font-weight: 700;

                    }
                }
            }
        }

        .measure_1 {
            width: (320 / 1608) * 100%;
            height: 438px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .treeEdit {
                margin-top: 8px;
                height: 342px;
                overflow: auto;
                padding: 0 10px;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                ::v-deep .el-tree-node__content {
                    padding: 26px 0;
                    color: #6A788D;
                }

                ::v-deep .el-tree-node.is-current>.el-tree-node__content {
                    color: #165DFF !important;
                    font-size: 16px;
                    font-weight: 700;
                    background-color: transparent;
                }

                .treeEdit_label {
                    height: 52px;
                    line-height: 52px;

                    ::v-deep .el-input {
                        width: 75%;
                    }

                }

                .treeEdit_child {
                    height: 52px;
                    margin-left: 10px;
                    line-height: 52px;

                    ::v-deep .el-input {
                        width: 70%;
                    }
                }

                .el-icon-delete,
                .el-icon-plus {
                    line-height: 52px;
                    color: rgba(22, 93, 255, 0.50);

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            .Btns {
                .edit {
                    margin-left: 75%;
                }

                .btnList {
                    margin-left: 50%;
                }
            }


        }

        .measure_2 {
            width: (1218 / 1608) * 100%;
            height: 438px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .content {
                height: 325px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 52px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;


                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }
                }
            }

            .Btns {
                margin-top: 20px;

                .edit {
                    margin-left: 93%;
                }

                .btnList {
                    margin-left: 86%;
                }
            }
        }

        .titles {
            height: 48px;
            line-height: 48px;
            background: rgba(22, 93, 255, 0.20);
            color: #165DFF;
            font-size: 14.325px;
            font-weight: 700;
            padding-left: 18px;
        }


    }

    .informationS {
        width: (1608 / 1720) * 100%;
        height: 378px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 12px 24px;

        .Btns {
            margin-top: 8px;
            height: 24px;
            font-size: 14px;
            line-height: 24px;

            .edit {
                width: 68px;
                height: 24px;
                border-radius: 4px;
                background: #165DFF;
                color: #FFF;
                text-align: center;
                font-weight: 700;
                margin-left: 67%;

                &:hover {
                    cursor: pointer;
                }
            }

            .btnList {
                width: 216px;
                font-weight: 350;
                margin-left: 11%;

                &>div {
                    width: 68px;
                    height: 24px;
                    border-radius: 4px;
                    text-align: center;
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);

                    &:hover {
                        cursor: pointer;
                    }

                    &:nth-child(1) {
                        background: #165DFF;
                        color: #FFF;
                        font-weight: 700;

                    }
                }
            }
        }

        .information_1 {
            width: (260 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid #165DFF;
            border-bottom: 2px solid #165DFF;
            background-color: #FFF;

            .information_con {
                height: 256px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 44px;
                    border-top: 0.895px solid rgba(106, 120, 141, 0.50);
                    color: #6A788D;
                    font-size: 14.325px;
                    font-weight: 500;
                    padding-left: 18px;
                    display: flex;
                    justify-content: space-between;

                    .content_1 {
                        width: 44px;
                        line-height: 44px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 44px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 44px;
                            font-size: 18px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 90%;
                        }

                        ::v-deep .el-input--medium .el-input__inner {
                            height: 35px !important;
                            line-height: 35px !important;
                        }

                        &:last-child {
                            border-top: none;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }
                }

            }
        }

        .active {
            background: rgba(22, 93, 255, 0.20);
        }

        .information_2 {
            width: (1284 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid #165DFF;
            border-bottom: 2px solid #165DFF;
            background-color: #FFF;

            .information_con {
                height: 255px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    // height: 52px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;


                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        margin-bottom: 5px;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }
                }
            }

            .Btns {
                .edit {
                    margin-left: 92%;
                }

                .btnList {
                    margin-left: 80%;
                }
            }
        }

        .information_title {
            height: 48px;
            line-height: 48px;
            padding-left: 18px;
            background: rgba(22, 93, 255, 0.20);
            color: #165DFF;
            font-size: 14.325px;
            font-weight: 700;
        }
    }

    .guarantee {
        width: (1608 / 1720) * 100%;
        height: 560px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 12px 24px;

        .text {
            width: 100%;
            height: 48px;
            color: #165DFF;
            font-size: 14.325px;
            font-weight: 700;
            line-height: 48px;
            background: rgba(22, 93, 255, 0.20);
            padding-left: 18px;
            border-bottom: 1px solid rgba(106, 120, 141, 0.50);
        }

        .typeList {
            width: (260 / 1608) * 100%;
            height: 528px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);

            .texts {
                height: 474px;
                overflow: auto;


                &>div {
                    height: 60px;
                    line-height: 60px;
                    padding-left: 18px;
                    border-bottom: 1px solid rgba(106, 120, 141, 0.50);
                    background-color: #FFF;
                    color: #6A788D;
                    font-size: 14px;
                    font-weight: 500;

                    &:last-child {
                        border-bottom: none;
                    }

                    &:hover {
                        cursor: pointer;
                    }
                }

                .active {
                    background: rgba(22, 93, 255, 0.10);
                }
            }
        }

        .contentList {
            width: (1284 / 1608) * 100%;
            height: 528px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);

            .texts {
                overflow: auto;
                height: 474px;
                padding: 20px 25px;
                line-height: 30px;
                color: #6A788D;
                font-size: 14px;
                font-weight: 500;
                background-color: #FFF;

                &>div {
                    margin-bottom: 5px;
                }

                .content_1 {
                    width: 40px;
                }

                .content_2 {
                    width: 97%;
                }
            }
        }
    }

    .texts::-webkit-scrollbar,
    .text_1::-webkit-scrollbar {
        width: 6px;
    }

    .texts::-webkit-scrollbar-thumb,
    .text_1::-webkit-scrollbar-thumb {
        background: #165DFF;
        border-radius: 13px;
    }

    .program {
        height: 560px;
        background: url('~@/assets/images/应急管理页面/3.png') no-repeat;
    }
}
</style>